<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    img
    {
      position:absolute;
      left:80%;
      top:0px;
      z-index:-1;/*z-index等于-1将位于文字下面(统计的h和p标签而言)，*/
    }
    .div1{
      width: 200px;
      height: 200px;
      background: grey;
      z-index:1;
    }
    .div2{
      width: 600px;
      height: 200px;
      background: greenyellow;
      position: relative;
      top: -100px;
      left: 100px;
      z-index: 2;
    }
  </style>
</head>

<body>
<div class="div1"></div>
<div class="div2">
  <!--div2是相对布局，给绝对袁术img元素做容器了-->
  <img src="https://www.runoob.com/try/demo_source/w3css.gif" width="100" height="140" />
  <h1>This is a heading</h1>
  <p>图像设置 z-index 属性值为 -1,所以它会显示在文字之后。你就是天上最亮的星星</p>
</div>
<!--<h1>This is a heading</h1>
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>-->
</body>
</html>